import './assets/main.css'

import { createApp } from 'vue'

// 从一个单文件组件中导入根组件
import App from './App.vue'

// 导入 Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// import * as ElementPlusIconsVue from "@element-plus/icons-vue"

// 调用 .mount 方法才会将写的内容渲染到页面上; 参数即容器在HTML中标签的id
// 应用的实例必须在调用了 .mount() 方法后才会渲染出来, 该方法接受一个 "容器" 参数, 可以是一个实际的DOM元素或是一个 CSS选择器字符串

// 创建应用并使用 Element Plus
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')




/*
DOM 概念解释
DOM (Document Object Model，文档对象模型) 是一个关键的前端技术概念，它：

是HTML文档的结构化表示：将页面内容组织为一个树状结构，每个HTML标签成为树中的一个节点（node）

是编程接口：允许JavaScript等语言访问和操作网页内容

将HTML转换为可操作对象：通过DOM，HTML元素、属性和文本都变成了可以编程访问的对象

DOM的核心特点
树形结构：根节点是document，包含元素节点（如div、p）、属性节点和文本节点
实时连接：对DOM的任何修改会立即反映在页面渲染上
跨平台：是W3C标准，在不同浏览器中基本一致
在Vue中的应用
在你当前的代码中：

这行代码正是Vue与DOM交互的体现：

#app 是CSS选择器，指向HTML中id为"app"的DOM元素
mount()方法告诉Vue将整个应用挂载到这个DOM元素上
Vue会接管该DOM元素，并基于你的组件定义自动管理其中的DOM结构
DOM是前端开发的基础，Vue等框架通过提供更高级的抽象，简化了直接操作DOM的复杂性，但其底层仍然依赖于DOM。
*/